<template>
  <div class="ratings" ref="ratings">
    <div>
      <div class="overview">
        <div class="overview-left">
          <span class="score">{{seller.score}}</span>
          <span class="text">综合评分</span>
          <span class="rank-rate">高于周边商家{{seller.rankRate}}%</span>
        </div>
        <div class="overview-right">
          <div class="service-wrapper">
            <span class="title">服务态度</span>
            <star class="score-star" :size="36" :score="seller.serviceScore"></star>
            <span class="score">{{seller.serviceScore}}</span>
          </div>
          <div class="service-wrapper">
            <span class="title">商品评分</span>
            <star class="score-star" :size="36" :score="seller.foodScore"></star>
            <span class="score">{{seller.foodScore}}</span>
          </div>
          <div class="delivery-wrapper">
            <span class="title">送达时间</span>
            <span class="time">{{seller.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>
      <div class="split"></div>
      <div class="rating-list">
        <rating-select :ratings="ratings" :select-type="selectType" :only-content="onlyContent" :desc="desc" @emit-sel-type="emitSelType" @emit-only-cnt="emitOnlyCnt"></rating-select>
        <div class="rating-wrapper" v-show="fnNeedShow(item.rateType,item.text)" v-for="item in ratings">
          <ul>
            <li class="rating-item">
              <img :src="item.avatar" class="avatar">
              <div class="rating-info">
                <div class="name-wrapper">
                  <span class="username">{{item.username}}</span>
                  <span class="rate-time">{{item.rateTime | fmtDate}}</span>
                </div>
                <div class="star-wrapper">
                  <star :size="36" :score="item.score" class="score-star"></star>
                  <span class="delivery-time">{{item.deliveryTime}}分钟送达</span>
                </div>
                <div class="text">{{item.text}}</div>
                <div class="recomme-wrapper">
                  <span class="icon-thumb icon-thumb_up" v-show="item.rateType === 0"></span>
                  <span class="icon-thumb icon-thumb_down" v-show="item.rateType === 1"></span>
                  <span v-for="rcm in item.recommend" class="recommend">{{rcm}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import svc from '../../common/js/service'
  import Star from '../star/Star'
  import RatingSelect from '../ratingselect/RatingSelect'
  import BScroll from 'better-scroll'

  // 常量
  // const POSITIVE = 0 // 推荐
  // const NEGATIVE = 1 // 吐槽
  const ALL = 2 // 全部

  export default {
    props: {
      seller: {
        type: Object
      }
    },
    data () {
      return {
        // 商家评论
        ratings: [],
        // 标志[全部 - 推荐 - 吐槽]中选中的哪一状态
        selectType: ALL,
        // 是否只显示有内容的评论
        onlyContent: false,
        // 按钮的文字
        desc: {
          all: '全部',
          positive: '满意',
          negative: '不满意'
        }
      }
    },
    components: {
      Star,
      RatingSelect
    },
    methods: {
      // 获取商家评论
      fnGetRatings () {
        let that = this
        svc.fnGetData('/api/ratings', {}, function (res) {
          if (res.body.ErrCode === 0) {
            that.ratings = res.body.Data
          }
        })

        that.$nextTick(() => {
          // 页面滚动
          if (!that.ratingScroll) {
            that.ratingScroll = new BScroll(this.$refs.ratings, {
              click: true
            })
          } else {
            that.ratingScroll.refresh()
          }
        })
      },
      // rating-select组件返回值 -> selectType
      emitSelType (selType) {
        this.selectType = selType
        this.$nextTick(() => {
          this.ratingScroll.refresh()
        })
      },
      // rating-select组件返回值 -> onlyContent
      emitOnlyCnt (onlyCnt) {
        this.onlyContent = onlyCnt
        this.$nextTick(() => {
          this.ratingScroll.refresh()
        })
      },
      // 评价过滤
      fnNeedShow (type, text) {
        if (this.onlyContent && !text) {
          return false
        }
        if (this.selectType === ALL) {
          return true
        } else {
          return type === this.selectType
        }
      }
    },
    mounted () {
      // 获取商家评论
      this.fnGetRatings()
    }
  }
</script>

<style lang="scss" scoped>
  .ratings {
    position: fixed;
    top: 174px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    .split {
      width: 100%;
      height: 16px;
      background: #f3f5f7;
      border-top: 1px solid rgba(7, 17, 27, .1);
      border-bottom: 1px solid rgba(7, 17, 27, .1);
    }
    .overview {
      display: flex;
      padding: 18px 0;
      .overview-left {
        flex: 0 0 137px;
        width: 137px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: 1px solid rgba(7, 17, 27, .1);
        .score {
          font-size: 24px;
          color: rgb(255, 153, 0);
          line-height: 28px;
          margin-bottom: 6px;
        }
        .text {
          font-size: 12px;
          color: rgb(7, 17, 27);
          line-height: 12px;
          margin-bottom: 8px;
        }
        .rank-rate {
          font-size: 10px;
          color: rgba(7, 17, 27, .7);
          line-height: 10px;
          margin-bottom: 6px;
        }
      }
      .overview-right {
        flex: 1;
        padding: 0 24px;
        .service-wrapper {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;
          margin-bottom: 8px;
          .title {
            line-height: 18px;
            color: rgb(7, 17, 27);
            padding-right: 12px;
          }
          .score-star {
            width: 50%;
            line-height: 18px;
          }
          .score {
            line-height: 18px;
            color: rgb(255, 153, 0);
            padding-left: 12px;
          }
        }
        .delivery-wrapper {
          display: flex;
          align-items: center;
          font-size: 12px;
          margin-bottom: 8px;
          .title {
            line-height: 18px;
            color: rgb(7, 17, 27);
            padding-right: 12px;
          }
          .time {
            line-height: 18px;
            font-size: 12px;
            color: rgb(147, 153, 159);
          }
        }
      }
    }
    .rating-list {
      .rating-wrapper {
        margin: 0 18px;
        .rating-item {
          display: flex;
          padding: 18px 0;
          border-bottom: 1px solid rgba(7,17,27,.1);
          .avatar {
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            margin-right: 12px;
            border-radius: 50%;
          }
          .rating-info {
            flex: 1;
            .name-wrapper {
              display: flex;
              justify-content: space-between;
              line-height: 12px;
              font-size: 10px;
              margin-bottom: 4px;
              .username {
                color: rgb(7,17,27);
              }
              .rate-time {
                font-weight: 200;
                color: rgb(147,153,157);
              }
            }
            .star-wrapper {
              display: flex;
              align-items: center;
              margin-bottom: 6px;
              .score-star {
                width: 30%;
                margin-right: 6px;
              }
              .delivery-time {
                font-size: 10px;
                font-weight: 200;
                color: rgb(147,153,159);
              }
            }
            .text {
              font-size: 12px;
              color: rgb(7,17,27);
              line-height: 18px;
              margin-bottom: 8px;
            }
            .recomme-wrapper {
              font-size: 0;
              .icon-thumb {
                font-size: 12px;
                line-height: 18px;
                &.icon-thumb_up {
                  color: rgb(0,160,220);
                }
                &.icon-thumb_down {
                  color: rgb(183,187,191);
                }
              }
              .recommend {
                margin-left: 8px;
                border: 1px solid rgba(7,17,27,.1);
                border-radius: 1px;
                padding: 0 6px;
                font-size: 9px;
                color: rgb(147,153,159);
                line-height: 16px;
              }
            }
          }
        }
      }
    }
  }
</style>
